<template>
 <div style="margin-top: -74px;" > 
	 <el-container id="bg">
		  <el-main>
			  <div style="position: fixed;top: 20%;left: 15%;">
				  <div class="titleCss">
				  				  <img src="../assets/image/title.png" alt="" />
				   </div>
				  <div class="login-from tab">
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
						<el-form-item style="margin-top: 20px;">
						  <h3>
							<span class="title">系统登录</span>
						  </h3>
						</el-form-item>
					  <el-form-item prop="username">
						<el-input  prefix-icon="el-icon-s-custom" 
						  v-model="loginForm.username"
						  autocomplete="off"
						  maxlength="20"
						  style="width: 100%"
						  placeholder="请输入账号"
						/>
					  </el-form-item>
					  <el-form-item prop="password">
						  
						 <el-input prefix-icon="el-icon-lock" class="test"
						    v-model="loginForm.password"
						    maxlength="20"
						    type="text"
						    style="width: 100%"
						    placeholder="请输入密码"
						  />
						  
<!-- 						<el-input prefix-icon="el-icon-lock"
						  v-model="pwdCover"
						  maxlength="20"
						  type="text"
						  id="pwd"
						  autocomplete="off"
						  @input="setPassword"
						  style="width: 100%;"
						  placeholder="请输入密码"
						/> -->
					  </el-form-item>
					  <!-- <el-form-item prop="code">
						<el-input prefix-icon="el-icon-success"
						  v-model="loginForm.code"
						  auto-complete="off"
						  placeholder="验证码"
						  style="width: 63%"
						  @keyup.enter.native="handleLogin"
						>
						</el-input>
						<div class="login-code">
						  <img :src="codeUrl" @click="getCode" />
						</div>
					  </el-form-item> -->
					</el-form>
					<el-button :loading="loading" @click="handleLogin" class="line-btn"
					  >登 录</el-button
					>
				  </div>
			  </div>

		 </el-main>
	</el-container>
 </div>

</template>

<script>
import { getCodeImg, getScanCode, getScanResult } from '@/api/login';
import { encrypt } from '@/utils/rsaEncrypt';
import Config from '@/config';
import QRCode from 'qrcodejs2';

export default {
  components: {},
  data() {
    return {
	  pwdCover:"",
      loading: false,
      codeUrl: '',
      code: null,
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: '',
        clientId: Config.clientId,
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
        // code: [
        //   { required: true, trigger: 'change', message: '验证码不能为空' },
        // ],
      },
    };
  },
  created() {
	  this.$nextTick(() => {
	    //this.getCode();
	    //this.getStorage();
	  });
  },
  mounted () {
  		this.$nextTick(() => {
  			const height = window.innerHeight;
  			document.getElementById("bg").style.height=height+"px";
  		})
  },
  methods: {
    //刷新验证码
    refreshCode() {
      this.clearCode();
    },
    getCode() {
      getCodeImg().then((res) => {
        this.codeUrl = 'data:image/gif;base64,' + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    getStorage() {
      const username = localStorage.getItem('username');
      let password = localStorage.getItem('password');
      const rememberMe = localStorage.getItem('rememberMe');
      this.cookiePass = password === null ? '' : password;
      password = password === null ? this.loginForm.password : password;
      this.loginForm = {
        username: username === null ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === null ? false : Boolean(rememberMe),
        code: '',
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid,
          clientId: this.loginForm.clientId,
        };
        // if (user.password !== this.cookiePass) {
        //   user.password = encrypt(user.password);
        // }
        if (valid) {
          this.loading = true;
          if (user.rememberMe) {
            localStorage.setItem('username', user.username);
            localStorage.setItem('password', user.password);
            localStorage.setItem('rememberMe', user.rememberMe);
          } else {
            localStorage.removeItem('username');
            localStorage.removeItem('password');
            localStorage.removeItem('rememberMe');
          }
          this.$store
            .dispatch('Login', user)
            .then(() => {
              this.loading = false;
			  this.$router.push({ path: '/home'}) 
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
	setPassword(val) {
	  if (this.isShowPassword) {
		this.loginForm.password = val;
	  } else {
		let nDot = /[^·]/g; // 非圆点字符··●
		let index = -1; // 新输入的字符位置
		let lastChar = void 0; // 新输入的字符
		let realArr = this.loginForm.password.split(""); // 真实密码数组
		let coverArr = val.split(""); // 文本框显示密码数组
		let coverLen = val.length; // 文本框字符串长度
		let realLen = this.loginForm.password.length; // 真实密码长度
		// 找到新输入的字符及位置
		coverArr.forEach((el, idx) => {
		  if (nDot.test(el)) {
			index = idx;
			lastChar = el;
		  }
		});
		if (realLen < coverLen) {
		  // 新增字符
		  realArr.splice(index, 0, lastChar);
		} else if (coverLen <= realLen && index !== -1) {
		  // 替换字符（选取一个或多个字符直接替换）
		  realArr.splice(index, realLen - (coverLen - 1), lastChar);
		} else {
		  // 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
		  let pos = document.getElementById("pwd").selectionEnd; // 获取光标位置
		  realArr.splice(pos, realLen - coverLen);
		}
		// 将 pwdCover 替换成 ●
		this.pwdCover = val.replace(/\S/g, "·");
		this.loginForm.password = realArr.join("");
	  }
	},
  },
};
</script>

<style lang="scss" scoped>
	h3{
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: #000000;
		font-weight: 600;
	}
</style>

<style lang="scss" >
   .el-container{
    padding:0px;
    position: relative;
    align-content: center;
    background: url(../assets/image/index.png) no-repeat 0px center;
    height: auto;
    width: 100%;
    min-width: 1400px;
    font-family: Microsoft YaHei,Arial;
    background-repeat: repeat-x;
    background-size: 100% auto;
    background-position: top;
  }
  .titleCss{
	height: 120px;
	width: 700px;
	position: relative;
	margin: 0 auto;
  }
.login-container {
  @apply h-screen flex items-center justify-center;
  height: 99%;
}
.el-form-item {
    margin-bottom: 35px;
}
.login-from{
	width: 380px;
	height: 380px;
	position: relative;
	margin: 0 auto;
	//background: #11151f;
	//opacity: 0.7;
	//border-radius: 20px;
	//box-shadow: 0 1px 3px rgba(0,0,0,.3);
	//box-sizing: border-box;
	margin-top: 30px;
}

.title {
    margin-left: 10px;
    text-align: center;
	font-size: 21px;
    color: #fff;
    font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  }
.tab {
	padding: 25px 25px 5px 25px;
	//margin-top: 11%;
  .el-tabs__nav-wrap::after {
    display: none;
  }
.test .el-input__inner{
  -webkit-text-security:disc;
  font-size: 14px;
}

  .el-input__inner {
    border-radius: 3px;
    border: none;
    background: #fff;
	opacity: 0.3;
	color: #000;
  }
  // .el-input__inner:focus {
  //   border-color: #dcdfe6;
  // }
  .line-btn{
	  width: 100%;
	  color: #131925;
	  background-color: #FFF;
	  border-color: #FFF;
	  border-radius: 2px;
  }
  .line-btn:hover,.line-btn:focus{
    color: #FFF;
    background-color: #dcdfe6;
    border-color: #dcdfe6;
  }
}

</style>